<template>
    <basic-container>
        <div class="card-border">
            <card-header :header-data="headerData"></card-header>
            <avue-crud :data="scheduleData"
                       :option="option"
                       :page="page"
                       :table-loading="tableLoading"
                       @size-change="sizeChange"
                       @current-change="currentChange"
                       @search-change="searchChange"
                       @search-reset="searchReset">
                <template slot="menuRight">
                    <el-button type="warning" size="small" @click="exportScheduleData()">导出</el-button>
                </template>
                <template  slot-scope="scope" slot="unitName">
                    <el-popover
                            placement="top-start"
                            title=""
                            trigger="hover">
                        <div class="popover-column">
                            <div class="popover-column-cell">
                                <span>科室 :</span>
                            </div>
                            <div class="popover-column-cell">
                                <span>{{scope.row.deptName}}</span>
                            </div>
                        </div>
                        <div class="popover-column">
                            <div class="popover-column-cell">
                                <span>联系人 :</span>
                            </div>
                            <div class="popover-column-cell">
                                <span>{{scope.row.contactName}}</span>
                            </div>
                        </div>
                        <div class="popover-column">
                            <div class="popover-column-cell">
                                <span>联系方式 :</span>
                            </div>
                            <div class="popover-column-cell">
                                <span>{{scope.row.contactNumber}}</span>
                            </div>
                        </div>
                        <p slot="reference">{{scope.row.unitName}}</p>
                    </el-popover>
                </template>
                <template  slot-scope="scope" slot="taskName">
                    <div style="float: left;margin-right: 6px;" @click.stop="flowChart(scope.row,scope.index)">
                        <el-tag type="success" size="small">{{scope.row.taskName}}</el-tag>
                    </div>
                </template>
                <template slot-scope="scope" slot="menu">
                    <div class="menu-title" style="float: none" @click.stop="transact(scope.row,scope.index)">
                        <i class="iconfont iconview icon-primary" v-if="scope.row.identityLinkType == 'candidate'"></i>
                        <p class="menu-title-text" v-if="scope.row.identityLinkType == 'candidate'">办理</p>
                        <i class="iconfont iconview icon-warning" v-if="scope.row.identityLinkType != 'candidate'"></i>
                        <p class="menu-title-text" v-if="scope.row.identityLinkType != 'candidate'">查看</p>
                    </div>
                    <!--<div class="menu-title" @click.stop="assign(scope.row,scope.index)">-->
                    <!--<i class="iconfont iconalter icon-warning"></i>-->
                    <!--<p class="menu-title-text">转办</p>-->
                    <!--</div>-->
                </template>
            </avue-crud>

            <el-dialog title="流程图" :visible.sync="showPicDialog" width="1200px">
                <img :src="actPicUrl" width="100%">
            </el-dialog>
            <el-dialog title="请选择导出文件字段" :visible.sync="chooseFieldsVisible" width="600px">
                <el-form
                        label-width="0px"
                        :model="chooseFieldForm"
                        ref="chooseFieldForm"
                >
                    <el-row>
                        <el-col :span="6">
                            <el-form-item class="form-item" label="" prop="isSelectTitle">
                                <el-checkbox v-model="chooseFieldForm.isSelectTitle" :disabled="true">规划名称</el-checkbox>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item" label="" prop="isSelectYear">
                                <el-checkbox v-model="chooseFieldForm.isSelectYear">年份</el-checkbox>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item" label="" prop="isSelectAreaCode">
                                <el-checkbox v-model="chooseFieldForm.isSelectAreaCode">地区代码</el-checkbox>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item" label="" prop="isSelectCategory">
                                <el-checkbox v-model="chooseFieldForm.isSelectCategory">规划类型</el-checkbox>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item" label="" prop="isSelectPlanningLevel">
                                <el-checkbox v-model="chooseFieldForm.isSelectPlanningLevel">规划层级</el-checkbox>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item" label="" prop="isSelectPlanningRank">
                                <el-checkbox v-model="chooseFieldForm.isSelectPlanningRank">规划等级</el-checkbox>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item" label="" prop="isSelectApprovingAuthorityLevel">
                                <el-checkbox v-model="chooseFieldForm.isSelectApprovingAuthorityLevel">审批机关级别</el-checkbox>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item" label="" prop="isSelectApprovingAuthorityNature">
                                <el-checkbox v-model="chooseFieldForm.isSelectApprovingAuthorityNature">审批机关性质</el-checkbox>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item" label="" prop="isSelectStartDate">
                                <el-checkbox v-model="chooseFieldForm.isSelectStartDate">规划开始时间</el-checkbox>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item" label="" prop="isSelectEndDate">
                                <el-checkbox v-model="chooseFieldForm.isSelectEndDate">规划结束时间</el-checkbox>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item" label="" prop="isSelectOrgName">
                                <el-checkbox v-model="chooseFieldForm.isSelectOrgName">申报单位</el-checkbox>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item" label="" prop="isSelectContactName">
                                <el-checkbox v-model="chooseFieldForm.isSelectContactName">联系人</el-checkbox>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item" label="" prop="isSelectContactNumber">
                                <el-checkbox v-model="chooseFieldForm.isSelectContactNumber">联系电话</el-checkbox>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="form-item" label="" prop="isSelectTaskName">
                                <el-checkbox v-model="chooseFieldForm.isSelectTaskName">环节</el-checkbox>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" style="text-align: center">
                    <el-button type="primary" @click="chooseFieldCommit()">确 定</el-button>
                    <el-button @click="chooseFieldsVisible=false">取 消</el-button>
                </div>
            </el-dialog>

            <assign :visible="assignVisible" :task-id="taskIdAssign" @cancelAssign="cancelAssign"></assign>
        </div>
    </basic-container>
</template>
<script>
    import {projectList,exportScheduleData,exportScheduleDataExcel} from "@/api/planning/project";
    import store from "@/store";

    export default {
        name: "schedule",
        data() {
            return {
                headerData: {
                    title: '待办规划'
                },
                actPicUrl: '',
                showPicDialog: false,
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                tableLoading: false,
                scheduleData: [],
                option: {
                    page: true,
                    addBtn: false,
                    editBtn: false,
                    addRowBtn: false,
                    indexLabel: "序号",
                    index: true,
                    cellBtn: false,
                    indexWidth:70,
                    delBtn: false,
                    columnBtn: false,
                    refreshBtn: false,
                    filterBtn: false,
                    searchBtn: false,
                    menuWidth: 160,
                    keyId: "id",
                    column: [
                        {
                            label: "规划名称",
                            prop: "title",
                            width: 310,
                            cell: true,

                        },
                        {
                            label: "规划名称",
                            prop: "titleLike",
                            search:true,
                            cell: false,
                            hide: true,
                        },
                        {
                            label: "规划类型",
                            prop: "category",
                            type: "select",
                            dicData: [
                                {
                                    label: "发展规划",
                                    value: "A"
                                },
                                {
                                    label: "专项规划",
                                    value: "B"
                                },
                                {
                                    label: "区域规划",
                                    value: "C"
                                },
                                {
                                    label: "空间规划",
                                    value: "D"
                                }
                            ],
                            search:true,
                            cell: true,
                        },
                        {
                            label: "申报单位",
                            prop: "unitName",
                            cell: true,
                            slot: true
                        },
                        {
                            label: "环节",
                            prop: "taskName",
                            cell: true,
                            slot: true,
                        },
                    ]
                },
                assignVisible: false,
                taskIdAssign: null,

                chooseFieldsVisible:false,
                chooseFieldForm:{
                    isSelectApprovingAuthorityLevel: true,  //审批机关级别
                    isSelectApprovingAuthorityNature: true,//审批机关性质
                    isSelectAreaCode: true,//地区代码
                    isSelectCategory: true,//规划类别
                    isSelectContactName: true,//联系人姓名
                    isSelectContactNumber: true,//联系人手机
                    isSelectOrgName: true,//申报单位
                    isSelectPlanningLevel: true,//拟发布层级
                    isSelectPlanningRank: true,//规划等级
                    isSelectStartDate: true,//规划开始时间
                    isSelectEndDate: true,//规划结束时间
                    isSelectTaskName: true,//环节名称
                    isSelectTitle: true,//规划名称
                    isSelectYear: true //年份
                },
                categorysSearch:'',
                titleLikeSearch:'',



            };
        },
        created() {
            this.getScheduleList(this.page)
        },
        methods: {
            getScheduleList(page, params) {
                this.tableLoading = true;
                projectList(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                },params)).then(response => {
                    this.scheduleData = response.data.data.records;
                    this.page.total = response.data.data.total;
                    this.tableLoading = false;
                    this.$emit("getTotal", response.data.data.total)
                })
            },
            //搜索回调
            searchChange(params) {
                this.page.currentPage = 1
                this.getScheduleList(this.page, this.dealSearchParam(params));
            },
            //搜索回调
            searchReset() {
                this.categorysSearch = '';
                this.titleLikeSearch = '';
                let params = {
                    categorys:this.categorysSearch,
                    titleLike:this.titleLikeSearch,
                };
                this.getScheduleList(this.page,params);
            },
            // 处理搜索过滤
            dealSearchParam(params) {
                if (params.category) {
                    params.categorys = params.category
                }
                if (params.titleLike) {
                    params.titleLike = params.titleLike
                }
                this.categorysSearch = params.category;
                this.titleLikeSearch = params.titleLike;
                return params;
            },
            currentChange(currentPage) {
                var page = this.page;
                page.currentPage = currentPage;
                let params = {
                    categorys:this.categorysSearch,
                    titleLike:this.titleLikeSearch,
                };
                this.getScheduleList(page,params);
            },
            sizeChange(pageSize) {
                var page = this.page;
                page.pageSize = pageSize;
                let params = {
                    categorys:this.categorysSearch,
                    titleLike:this.titleLikeSearch,
                };
                this.getScheduleList(page,params);
            },

            // 办理
            transact(row, index) {
                let src = row.formKey + '/' + row.taskId;
                this.$router.push({
                    path: src,
                    query: {
                        registerinfoId: row.registerinfoId
                    }
                })
            },
            handleSubmit() {
            },
            flowChart(row, index) {
                this.actPicUrl = process.env.VUE_APP_AXIOS_BASE_URL +  `/planning/registerinfo/task/view/` + row.taskId +'?access_token='+ store.getters.access_token;
                this.showPicDialog = true;
            },
            assign(row) {
                this.taskIdAssign = row.taskId;
                this.assignVisible = true;
            },
            cancelAssign() {
                this.assignVisible = false;
            },
            exportScheduleData(){
                this.chooseFieldsVisible = true
            },
            chooseFieldCommit(){
                this.$confirm("确定要导出待办规划列表吗?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.chooseFieldsVisible = false;
                    exportScheduleDataExcel(Object.assign({
                        isSelectApprovingAuthorityLevel:this.chooseFieldForm.isSelectApprovingAuthorityLevel,
                        isSelectApprovingAuthorityNature:this.chooseFieldForm.isSelectApprovingAuthorityNature,
                        isSelectAreaCode:this.chooseFieldForm.isSelectAreaCode,
                        isSelectCategory:this.chooseFieldForm.isSelectCategory,
                        isSelectContactName:this.chooseFieldForm.isSelectContactName,
                        isSelectContactNumber:this.chooseFieldForm.isSelectContactNumber,
                        isSelectEndDate:this.chooseFieldForm.isSelectEndDate,
                        isSelectOrgName:this.chooseFieldForm.isSelectOrgName,
                        isSelectPlanningLevel:this.chooseFieldForm.isSelectPlanningLevel,
                        isSelectPlanningRank:this.chooseFieldForm.isSelectPlanningRank,
                        isSelectStartDate:this.chooseFieldForm.isSelectStartDate,
                        isSelectTaskName:this.chooseFieldForm.isSelectTaskName,
                        isSelectTitle:this.chooseFieldForm.isSelectTitle,
                        isSelectYear:this.chooseFieldForm.isSelectYear,
                    })).then(response => {
                        let exportFileName = "待办规划列表.xlsx";
                        this.download(response.data, exportFileName)
                    });
                })
            },
            // 下载文件
            download(data, filename) {
                if (data == null) {

                } else {
                    let url = window.URL.createObjectURL(new Blob([data]));
                    let link = document.createElement('a');
                    link.style.display = 'none';
                    link.href = url;
                    link.setAttribute('download', filename);
                    document.body.appendChild(link);
                    link.click()
                }
            },




        }
    };
</script>

<style lang="scss" scoped>
    .card-border {
        border: 1px solid #d2d2d2;
    }

    .card-body {
        padding: 10px;
    }

    .head-button .el-button {
        padding: 8px 15px;
    }

    .form-item {
        font-weight: 600;
    }
    /deep/.el-form-item__content {
        /*width: 50%;*/
        line-height: 40px;
        position: relative;
        font-size: 14px;
    }
    .popover-column{
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #DADADA;
    }
    .popover-column-cell{
        margin: 5px 0;
    }
</style>

